{extend name="common@base/common" /}

{block name="style"}
<link href="__CSS__/main.min.css" type="text/css" rel="stylesheet">
{/block}
{block name="body"}
{include file="muushop/public/_nav"/}
<div id="main-container" class="container">
<header class="color-main vertical-box">
    <h3 class="header-title">购物车</h3>
</header>

    <article class="cart-main">
        {notempty name="list"}
        <div class="cart-thead clearfix">
            <div class="column t-checkbox">
                <button class="btn btn-sm btn-danger" data-role="all-check">全选</button>
            </div>
            <div class="column t-goods">商品</div>
            <div class="column t-props"></div>
            <div class="column t-price">单价</div>
            <div class="column t-quantity">数量</div>
            <div class="column t-sum">小计</div>
            <div class="column t-action">操作</div>
        </div>
        <div class="cart-tbody">
        {volist name="list" id="data"}
            <div class="good-section clearfix" data-id="{$data['id']}">
                
                <div class="good-left-check vertical-box">
                    <span class="circle-checkbox active-bg">
                        <i class="icon icon-check"></i>
                    </span>
                </div>

                <div class="good-info clearfix">
                    <div class="good-section-pic">
                        <a href="{:url('index/product',array('id'=>$data['product']['id']))}">
                            <img class="good-section-img" src="{$data['product']['main_img']|getThumbImageById=200,200}">
                        </a>
                    </div>
                    <div class="good-section-title">
                        <a href="{:url('index/product',array('id'=>$data['product']['id']))}">
                            {$data['product']['title']}
                        </a>
                    </div>
                    
                    <div class="good-section-option">
                        {notempty name="$data['sku_id']"}
                        {volist name="$data['sku']" id="sku"}
                        <p class="sku">{$sku}</p>
                        {/volist}
                        {/notempty}
                    </div>
                    
                    <div class="good-section-tprice">
                        ￥<span class="">{$data['product']['price']}</span>
                    </div>

                    <div class="good-section-quantity">
                        <span class="section-type sku-type count-box clearfix" data-role="edit-cart" data-url="{:url('muushop/api/cart',['action'=>'edit'])}">
                            <button class="count-btn cut-btn">-</button>
                            <input class="count-input" type="text" value="{$data['quantity']}" readonly>
                            <button class="count-btn add-btn">+</button>
                        </span>
                        <span class="">（剩余库存：<span class="quantity">{$data['product']['quantity']}</span>）</span>
                    </div>

                    <div class="good-section-tsum">
                        ￥<span class="product-price">{$data['total_price']}</span>
                    </div>

                    <div class="good-section-action">
                        <button class="btn btn-sm btn-link del-good" data-role="delete-cart" data-url="{:url('muushop/api/cart',['action'=>'delete'])}">删除</button>
                    </div>

                </div> 
                
            </div>
        {/volist}
        </div>
        {else /}
        <div class="empty-cart-item">
            <p class="empty-cart-p tips-font">
                购物车还是空的噢<br/><a href="{:url('muushop/Index/cats')}" >去挑几件商品吧!</a>
            </p>
        </div>
        {/notempty}
    </article>

    
    <div class="buy-confirm-box">
        <div class="clearfix ">

            <div class="border-box editing-cart">
                <button class="btn btn-sm btn-danger" data-role="all-check">全选</button>
                <button class="btn btn-sm btn-link" data-role="del-cart">移除选定商品</button>
            </div>
            
            <div class="border-box buyImmediately" data-rule="buy-immediately" data-url="{:url('muushop/Order/makeOrder')}">
                <span class="">
                    去结算
                </span>
                <span class="normal-text">（已选商品:<span id="products-count">0</span>）</span>
            </div>

            <div class="border-box total-price">
                合计：￥<span id="products-price-all">0</span>
            </div>
        </div>
    </div>
    
</div>
{/block}
{block name="script"}
    <script src="__JS__/common.min.js"></script>
    <script src="__JS__/cart.min.js"></script>
{/block}